/**
 * zhj
 */
import React, {Component} from 'react';
import {
    Platform,
    StyleSheet,
    Text,
    View,
    Button,
    Dimensions,
    FlatList
} from 'react-native';
import CommonStyle from "../CommonStyle";
import BasePage from "./BasePage";


const width = Dimensions.get('window').width;
import moment from 'moment';


export default class HistoryMatchList extends BasePage {
    constructor(props) {
        super(props)

    }

    _showtext() {
        return <View style={{
            flexDirection: 'row',
            backgroundColor: 'white',
            width: width,
            justifyContent: 'center',
            height: 30

        }}>
            <Text style={{fontSize: 11, color: '#666666', width: '30%', textAlign: 'center'}}>暂无数据
            </Text>

        </View>
    }

    _renderItem = ({item}) => (

        <View style={{
            flexDirection: 'row',
            backgroundColor: 'white',
            width: width,
            justifyContent: 'space-between',
            paddingLeft: 15,
            paddingRight: 15,
            paddingTop: 8,
            paddingBottom: 8,
            marginTop: 0.5
        }}>
            <Text style={{fontSize: 12, color: '#333333', width: '23%', flexWrap: 'wrap'}}>

                {moment.unix(item.matchStartTime).format('YYYY-MM-DD HH:mm:ss')}
            </Text>
            <Text style={{fontSize: 12, color: '#333333', width: '15%', flexWrap: 'wrap', textAlign: 'center'}}>
                {item.eventNm}
            </Text>
            <View style={{width: '50%', flexDirection: 'row'}}>
                <Text style={{fontSize: 12, color: '#333333', width: '40%', flexWrap: 'wrap', textAlign: 'center'}}>
                    {item.homeNm}
                </Text>
                <Text style={{fontSize: 12, color: '#333333', width: '20%', flexWrap: 'wrap', textAlign: 'center'}}>
                    {item.homeScore + "-" + item.awayScore}
                </Text>
                <Text style={{fontSize: 12, color: '#333333', width: '40%', flexWrap: 'wrap', textAlign: 'center'}}>
                    {item.awayNm}
                </Text>

            </View>
            <View style={{width: '12%', height: 12, alignItems: 'center', backgroundColor: 'red'}}>

                {item.matchRst === -1 ?

                    <Text style={{fontSize: 10, color: 'white',}}>
                        负
                    </Text> : item.matchRst == 0 ?
                        <Text style={{fontSize: 10, color: 'white',}}>
                            平
                        </Text> :
                        <Text style={{fontSize: 10, color: 'white',}}>
                            赢
                        </Text>}

            </View>
        </View>
    );
    _keyExtractor = (item, index) => item;

    render() {


        return (
            <View style={[this.props.style, styles.container]}>
                <View style={{flexDirection: 'row', backgroundColor: '#d9d9d9', width: width,}}>
                    {
                        this.props.type == 0 ? <Text style={styles.title_left}>
                            历史交战
                        </Text> : this.props.type == 1 ? <Text style={styles.title_left}>
                            A组
                        </Text> : <Text style={styles.title_left}>
                            B组
                        </Text>
                    }

                    <Text style={styles.title_right}>
                        {this.props.data.tolWon != null ? this.props.data.tolWon + "胜" + this.props.data.tolDrawn + "平" + this.props.data.tolLost+"平"
                            : null

                        }
                    </Text>
                </View>
                <View style={{
                    flexDirection: 'row',
                    backgroundColor: 'white',
                    width: width,
                    justifyContent: 'space-between',
                    paddingLeft: 15,
                    paddingRight: 15,
                    paddingTop: 8,
                    paddingBottom: 8
                }}>
                    <Text style={{fontSize: 11, color: '#666666', width: '23%'}}>
                        时间
                    </Text>
                    <Text style={{fontSize: 11, color: '#666666', width: '15%', textAlign: 'center'}}>
                        联赛
                    </Text>
                    <Text style={{width: '50%', fontSize: 11, color: '#666666', textAlign: 'center'}}>
                        比赛
                    </Text>
                    <Text style={{width: '12%', fontSize: 11, color: '#666666', textAlign: 'center'}}>
                        赛果
                    </Text>
                </View>
                {
                    this.props.data.battle != null && this.props.data.battle.length >= 1 ?
                        <FlatList
                            style={styles.liststyle}
                            data={this.props.data.battle}
                            renderItem={this._renderItem}
                            keyExtractor={this._keyExtractor}
                        >
                        </FlatList>
                        :
                        <View style={{
                            flexDirection: 'row',
                            backgroundColor: 'white',
                            width: width,
                            justifyContent: 'center',
                            height: 30

                        }}>
                            <Text style={{fontSize: 11, color: '#666666', width: '30%', textAlign: 'center'}}>暂无数据
                            </Text>

                        </View>
                }


            </View>
        );
    };
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    title_left: {
        fontSize: 11,
        color: '#333333',
        alignSelf: 'flex-start',
        marginTop: 8,
        marginBottom: 8,
        marginLeft: 15,
    },
    title_right: {
        fontSize: 11,
        color: '#333333',
        position: 'absolute',
        marginTop: 8,
        right: 15
    },
    liststyle: {
        backgroundColor: '#f2f2f2',


    }

});